<template>
	<view>
		<u-navbar title="我的收藏" :border-bottom='false' back-icon-size='48'></u-navbar>
		<view class="tab-bar">
			<u-tabs :list="tabList" :is-scroll="false" active-color="#333333" bar-height='4' bar-width='64'
				:bar-style='barStyle' :current="current" @change="tabChange" :bold='false'></u-tabs>
		</view>
	
		<view class="main" v-if="current ==1">
			<u-gap height="28" bg-color="#F2F2F7"></u-gap>
			<uni-swipe-action>
				<uni-swipe-action-item v-for="(item, index) in collectList" :key="index" :right-options="options"
					@change="swipeChange(index)" @click="swipeClick(index)">
					<view class="item-li">
						<view class="icon">
							<image :src="item.image_path" mode=""></image>
						</view>
						<view class="intro">
							<view class="title">
								{{item.name}}
							</view>
							<view class="num">
								已有{{item.fav_count}}人收藏
							</view>
							<view class="price">
								¥ {{item.i_price}}
							</view>
						</view>
					</view>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</view>

		<u-modal v-model="showDel" :content="content" :show-title='false' :show-cancel-button='true' cancel-color=''
			confirm-text='删除' confirm-color='#FF4141'></u-modal>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	export default {
		data() {
			return {
				barStyle: {
					background: 'linear-gradient(180deg, #6ABCFC 0%, #048FFE 100%)'
				},
				tabList: [{
						name: '我的旅游'
					},
					{
						name: '我的商品'
					},
					{
						name: '我的实体店'
					},
					{
						name: '我的发现'
					},
				],
				current: 0,
				content: '确认要删除该宝贝吗？',
				showDel: false,
				list: ['1', '2'],
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#D7E5FE',
						color: '#333333'
					}
				}],
				collectList: []
			}
		},
		onLoad() {
			this.getmyCollect()
		},
		methods: {
			tabChange(index) {
				this.current = index
			},
			async getmyCollect() {
				let res = await myRequest.getMyCollect()
				if (res.status) {
					console.log(res)
					this.collectList = res.data
				}
			},
			swipeChange(index) {
				console.log(index)
			},
			swipeClick(index) {
				console.log(index)
				this.showDel = true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-bar {
		width: 100%;
		position: fixed;
		z-index: 99;
	}

	.main {
		padding-top: 80rpx;
		background-color: #FFFFFF;
		.item-li {
			width: 694rpx;
			height: 248rpx;
			border-bottom: 2rpx solid #F2F2F7;
			margin: 0 auto;
			padding: 24rpx 0;
			display: flex;
			&:last-child {
				border-bottom:none
			}
			.icon {
				margin-right: 10rpx;

				image {
					width: 200rpx;
					height: 200rpx;
				}
			}

			.intro {
				width: 428rpx;

				.title {
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #333333;
				}

				.num {
					// margin-top: 8rpx;
					font-size: 24rpx;
					font-family: Arial;
					font-weight: 400;
					color: #999999;
				}

				.price {
					// margin-top: 34rpx;
					text-align: right;
					font-size: 32rpx;
					font-family: Segoe UI;
					font-weight: 400;
					color: #FF7C0A;
				}
			}
		}
	}

</style>
